//登录组件
import React from 'react'
import './LoginForm.css'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message, Spin, Space } from 'antd';
import { usePostloginMutation } from '../../store/request/loginrequest';
import { useDispatch } from 'react-redux';
import { useState } from 'react';
import { setLoginState } from '../../store/slice/loginslice';
import { useNavigate } from 'react-router-dom'
const LoginForm = () => {
    const [loading, setloading] = useState(false);//用于点击了登陆后显示loading

    const dispatch = useDispatch();
    const navigate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();
    const [trigger] = usePostloginMutation();
    const messageerror = () => {
        messageApi.open({
            type: 'error',
            content: '用户名或密码错误',
        });
    };

    const onFinish = async (values) => {
        //console.log('Received values of form: ', values.loginname);
        setloading(true);
        const r = await trigger(values).unwrap();
        if (r.code === 200) {
            //这个时候虽然调用了setLoginState的函数，但这时候组件还没有重新渲染，所以state里面的值还是原来的值
            //直到return后面的代码才改了state里面的值。所以useState的值一般用于页面渲染，不用与之前的逻辑判断，因为这个时候值还没有发生改变
            dispatch(setLoginState(r.data));
            //console.log(values.loginname);
            navigate("/datamonitor/main", { replace: true, state: values.loginname })//登录成功传递loginname参数到main组件中显示
        }
        else {
            messageerror();
        }
        setloading(false);

        // trigger(values);

    };
    const registerOnclick = () => {

        navigate("/datamonitor/register", { replace: true });

    };


    return (
        <>
            {contextHolder}

            <div className='login'>

                <div className='form'>
                    <Space
                        direction="vertical"
                        size="middle"
                        style={{
                            display: 'flex',
                        }}
                    >
                        <p className='title'>车辆监测系统 V1.0</p>
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="loginname"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名!',
                                    },
                                ]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码!',
                                    },
                                ]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="密码"
                                />
                            </Form.Item>
                            <Form.Item>
                                <Form.Item name="remember" valuePropName="checked" noStyle>
                                    <Checkbox className='rememberme'>记住我</Checkbox>
                                </Form.Item>


                            </Form.Item>

                            <Form.Item>

                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>

                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" danger onClick={registerOnclick} className="login-form-button">
                                    去注册
                                </Button>

                            </Form.Item>
                            <Form.Item>
                                {loading ? (<Spin tip="登陆中……，请稍等" size="large">
                                    <div className="content" />
                                </Spin>) : <></>}
                            </Form.Item>


                        </Form>

                    </Space>



                </div>

            </div>
        </>


    )
}

export default LoginForm
